 $(function() {   
    var layerInfo = [
                        {
                            url:"http://172.29.1.26:8090/iserver/services/map-pytest11/rest/maps/ZG用地规划1",
                            index:0,
                            name:'用地规划',
                            child:[
                                    {
                                        url:"",
                                        index:0,
                                        name:"",
                                        child:[
                                                {
                                                    url:"",
                                                    index:0,
                                                    name:""
                                                },
                                                {
                                                    url:"",
                                                    index:0,
                                                    name:""
                                                }
                                        ]
                                    },
                                    {
                                        url:"",
                                        index:0,
                                        name:"",
                                        child:[
                                                {
                                                    url:"",
                                                    index:0,
                                                    name:""
                                                },
                                                {
                                                    url:"",
                                                    index:0,
                                                    name:""
                                                }
                                        ]
                                    }
                            ]
                        },
                        {url:"http://172.29.1.26:8090/iserver/services/map-pytest11/rest/maps/ZG市政规划1",index:1,name:'市政规划'}
                     ];
    var layers = [];
    $.each(layerInfo,function(i,v){
        layers[v.index] = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: v.url
            })
        });
    });
    map = new ol.Map({
        layers: layers,
        target: 'swipeMap',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
        view: new ol.View({
            center: [451343.84 , 4017036.9],
            zoom: 15,
        })
    });
    swipe = document.getElementById('swipe');
    layers[0].on('precompose', function (event) {
        ctx = event.context;
        width = ctx.canvas.width * (swipe.value / 100);
        ctx.save();
        ctx.beginPath();
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
        ctx.clip();
    });
    layers[0].on('postcompose', function (event) {
        var ctx = event.context;
        ctx.restore();
    });
    swipe.addEventListener('input', function () {
        map.render();
    }, false);
});   